<template>
  <div class="user">
    <input
      @blur="showErrMsg"
      :class="{error:!isValid}"
      :type="type"
      :placeholder="placeholder"
      v-model="inputVal"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: "",
      isValid: true
    };
  },
  props: ["type", "placeholder", "rule", "errMessage"],
  watch: {
    inputVal() {
      console.log("输入框发生了改变");
      //   var reg = /^\d{6}$/;
      const reg = new RegExp(this.rule);
      if (!reg.test(this.inputVal)) {
        this.isValid = false;
        console.log(this.errMessage);
      } else {
        this.isValid = true;
      }
      this.$emit("valchange", this.inputVal);
    }
  },
  methods: {
    showErrMsg() {
      if (!this.isValid) {
        // alert(this.errMessage);
        // 使用vant-ui中的Toast轻提示
        this.$toast.fail(this.errMessage);
      }
    }
  }
};
</script>

<style lang='less'>
.user {
  margin-top: 6.167vw;
  input {
    display: block;
    outline: 0;
    height: 8.333vw;
    margin: auto;
    width: 91.667vw;
    color: #9f9f9f;
    font-size: 5.556vw;
    padding-bottom: 2.778vw;
    border: 0;
    border-bottom: 1px solid #000;
    background-color: #f2f2f2;
  }
  .error {
    border-color: red;
  }
}
</style>